<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-cn" />
    <title> MOCK-INIT </title>
    <meta name="author" content="xin.hu@socialcredits.cn" />
    <script type="text/javascript" src="/static/jquery.min.js"></script>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/bootstrap.min.js"></script>
    <script src="/static/jquery-ui.min.js"></script>
    <script src="/static/jquery.ui.touch-punch.min.js"></script>
    <script src="/static/jquery.htmlClean.js"></script>
    <script src="/static/scripts.min.js"></script>
    <script type="text/javascript">

    var addProject = function() {
        $.ajax({
           url: '/api/project',
           dataType: 'json',
           data:{
                project:$("#project").val()
           },
           type: 'PUT',
           async: false,
           cache: true,
           success: function (response) {
               alert("添加成功");
               location.href='/api/init';
           }
        });
    };

    var deleteProject = function(projectName) {
        $.ajax({
           url: '/api/project',
           dataType: 'json',
           data:{
                project:projectName
           },
           type: 'DELETE',
           async: false,
           cache: true,
           success: function (response) {
               alert("删除成功");
               location.href='/api/init';
           }
        });
    };

    $(function(){
        $(".project").click(function(){
            window.location.href='/api/'+$(this).text()+'/init';
        });
    });
    </script>
</head>
<body>

<div class="container" style="margin-top:50px">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="form-group" style="margin-top: 10px;">
                <label for="project">项目名称</label>
                <input type="text" class="form-control" id="project" />
            </div>
            <div class="btn-group">
                <button class="btn btn-default" onclick="javascript:addProject()">添加</button>
            </div>
        </div>
    </div>
</div>

<div class="container" style="margin-top:50px">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title">
                        项目列表
                    </h2>
                </div>
                {% for p in projects %}
                <div class="panel-body">
                    <a class="project" href='#'>{{p}}</a>   <a id="deleteProject" href='javascript:deleteProject("{{p}}")' style="float:right">X</a>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
</body>
</html>